<template>
  <div class="q-detail">
    <div class="q-top">
      <van-nav-bar
        left-arrow
        placeholder
        fixed
        title="问答详情"
        @click-left="back"
      />
      <div class="question">
        <div class="q-content">
          <div class="content-head">
            <span>标签</span>
            关于怎么提升公司公众号流量，应提升 那几方面?
          </div>
          <div class="imgList">
            <img  v-for="i in 5" :key="i"  src="@img/banner.png" alt="" />
          </div>
          <div class="contetn-desc">
            <span>34浏览</span>
            <span>共12个回答</span>
          </div>
          <div class="last-ct"><img src="@img/wgz.png" alt="" /> 关注问题</div>
          <div class="last-ct">
            <div class="last-all">
              <div class="last-m">悬赏100金币</div>
              <div class="last-i">
                <img src="@img/hl.png" alt="" />
              </div>
              <div class="last-g"><img src="@img/bx.png" alt="" /> 已关注</div>
            </div>
          </div>
        </div>
      </div>
      <div class="q-list">
        <div class="list-head">问答回复（3）</div>
        <div class="list" v-for="i in 5" :key="i">
          <div class="list-head">
            <div class="list-img">
              <img src="@img/avatar.png" alt="" />
            </div>
            <div class="list-content">
              <div class="list-name">上官高高</div>
              <div class="list-desc">市场专员</div>
            </div>
            <div class="list-r" @click="jbShow = true">...</div>
          </div>
          <div class="list-item">
            观点：公众号可以通过以下方式提高浏览量：
            1.提供有价值的内容：公众号需要把精力放在创、有深度、有营养的内容上，这样才能吸引读者的眼球。内容应该与读者有关，并将读者的需求放在首位。
          </div>
          <div class="list-wrap-img">
            <van-row gutter="11">
              <van-col span="8" v-for="i in 4" :key="i"
                ><img src="@img/zsbg.png" alt=""
              /></van-col>
            </van-row>
          </div>
          <div class="pj-btm">
            <div class="time">2023-02-22 12:23 回答</div>
            <div class="spres">
              <span @click="pl"><van-icon name="comment-o" />评论</span>
              <span><van-icon name="comment-o" />赏</span>
              <span><van-icon name="good-job-o" />2</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model:show="show"
      position="bottom"
      :style="{
        height: '100%',
        backgroundColor: '#F4F8FF',
        borderRadius: '8px 8px 0px 0px',
      }"
    >
      <div class="popCont">
        <van-nav-bar title="评论详情">
          <template #right>
            <van-icon name="cross" size="18" />
          </template>
        </van-nav-bar>
        <div class="wrapItem">
          <div class="myQuesetion">
            <div class="q-head">
              <div class="q-img">
                <img src="@img/avatar.png" alt="" />
              </div>
              <div class="q-user">
                <div class="q-name">陈小红</div>
                <div class="q-desc">市场专员</div>
              </div>
              <div class="q-r"><span class="dro">￥</span> 赞赏</div>
            </div>
            <div class="myq">我的评论我的评论我的评论我的评论我的</div>

            <div class="zs">
              <!-- isZs -->
              <van-button class="zs-bt" icon="good-job-o" @click="clickZ">{{
                value
              }}</van-button>
            </div>
          </div>
          <div>
            <div class="q-list myQuesetion" v-for="i in 4" :key="i">
              <div class="myQuesetion">
                <div class="q-head">
                  <div class="q-img">
                    <img src="@img/avatar.png" alt="" />
                  </div>
                  <div class="q-user">
                    <div class="q-name">陈小红</div>
                    <div class="q-desc">市场专员</div>
                  </div>
                  <div class="q-r">
                    <span class="dro">￥</span> 赏
                    <van-icon
                      style="padding-left: 21px"
                      name="good-job-o"
                      size="16"
                    />
                    1
                  </div>
                </div>
                <div class="myq">我的评论我的评论我的评论我的评论我的</div>
                <div class="f-time">2023-07-22 回复Ta</div>
                <div class="msg">
                  <div class="msg-title">陈霞和：666</div>
                  <div class="msg-all">
                    查看全部回复<van-icon name="arrow" color="#b9bdbd" />
                  </div>
                </div>
              </div>
            </div>
            <div class="noData">
              <img src="@img/nopl.png" alt="" />
            </div>
          </div>
        </div>
        <div class="hf">
          <van-cell-group inset>
            <van-field v-model="value" placeholder="回复  陈小红" />
          </van-cell-group>
        </div>
      </div>
    </van-popup>
    <van-action-sheet
      v-model:show="jbShow"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: "赞",
      jbShow: false,
      actions: [{ name: "举报动态" }, { name: "取消" }],
    };
  },
  methods: {
    back() {
      window.history.back();
    },
    pl() {
      this.show = true;
    },
    clickZ() {},
    onSelect() {},
  },
};
</script>

<style scoped lang="scss">
.q-detail {
  background: url("@img/question.png") no-repeat;
  background-size: 100% 100%;
}
.q-top {
  //height: 255px;
  //background: linear-gradient(180deg, #00c37d 0%, #f4f8ff 100%);
  .question {
    margin: 10px 16px;
    background: #ffffff;
    border-radius: 11px;
    .q-content {
      padding: 18px 12px;
      .content-head {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #272b2d;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        span {
          background: #d8f3e5;
          border-radius: 2px;
          display: inline-block;
          padding: 2px 5px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #00ad6f;
          line-height: 17px;
          font-style: normal;
        }
      }
      .imgList {
      margin-top: 9px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          margin-right: 12px;
          margin-bottom: 12px;
        }
      }
      .contetn-desc {
        margin-top: 18px;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #676b6b;
        line-height: 17px;
        font-style: normal;
      }
      .last-ct {
        height: 29px;
        background: #d8f3e5;
        border-radius: 16px;
        line-height: 29px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #272b2d;
        text-align: center;
        font-style: normal;
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 4px;
        }
        .last-all {
          display: flex;
          .last-m {
            background: linear-gradient(90deg, #ffd474 0%, #ffa940 100%);
            flex: 1;
            height: 29px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            font-style: normal;
          }
          .last-g {
            background: #2ece7f;
            flex: 1;
            height: 29px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            font-style: normal;
          }
          .last-i {
            width: 29px;
            height: 29px;
            img {
              width: 100%;
              height: 100%;
              margin-right: 0;
              vertical-align: sub;
            }
          }
        }
      }
    }
  }
  .q-list {
    padding: 0 16px;
    .list-head {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #171a1d;
      text-align: left;
      font-style: normal;
      padding: 22px 0 9px 0;
    }
    .list {
      padding: 15px 14px;
      margin-bottom: 13px;
      background: #ffffff;
      border-radius: 11px;
      margin-bottom: 13px;
      .list-head {
        display: flex;
        .list-img {
          width: 36px;
          height: 36px;
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        .list-content {
          flex: 1;
          margin-left: 6px;
          .list-name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #1e1f1f;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
          .list-desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #898e8d;
            line-height: 17px;
            text-align: left;
            font-style: normal;
          }
        }
        .list-r {
        }
      }
      .list-item {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1e1f1f;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        padding-bottom: 10px;
      }
      .list-wrap-img {
        padding-bottom: 18px;
        img {
          width: 96px;
          height: 96px;
          border-radius: 4px;
        }
      }
      .pj-btm {
        display: flex;
        justify-content: space-between;
        .time {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
        .spres {
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #272b2d;
            line-height: 17px;
            text-align: center;
            font-style: normal;
            padding-right: 21px;
            ::v-deep(.van-icon) {
              padding-right: 4px;
            }
          }
        }
      }
    }
  }
}
.noData {
  text-align: right;
  img {
    width: 100%;
    height: 100%;
    padding-left: 60px;
  }
}
.popCont {
  .wrapItem {
    padding: 0 16px;
    .myQuesetion {
      background: #ffffff;
      border-radius: 8px;
      padding: 18px 16px;
      margin-bottom: 13px;
      .q-head {
        display: flex;
        .q-img {
          width: 36px;
          height: 36px;
          img {
            height: 100%;
            width: 100%;
            vertical-align: middle;
            border-radius: 50%;
          }
        }
        .q-user {
          flex: 1;
          padding-left: 5px;
          .q-name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #1e1f1f;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
          .q-desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #898e8d;
            line-height: 17px;
            text-align: left;
            font-style: normal;
          }
        }
        .q-r {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #272b2d;
          line-height: 17px;
          text-align: center;
          font-style: normal;
          display: flex;
          align-items: center;
          .dro {
            width: 14px;
            height: 14px;
            display: inline-block;
            border: 1px solid #272b2d;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            margin-right: 4px;
          }
        }
      }
      .myq {
        padding: 6px 0 12px 41px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1e1f1f;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
      .zs {
        text-align: center;
        .zs-bt {
          background: #f4f6fa;
          border-radius: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #272b2d;
          line-height: 32px;
          text-align: right;
          font-style: normal;
          width: 74px;
          height: 32px;
        }
        .isZs {
          background: #d8f3e5;
          border-radius: 16px;
          color: #00ad6f;
        }
      }
    }
    .q-list {
      padding: 0;
      margin-bottom: 0;
      .myQuesetion {
        margin-bottom: 0;
      }
      .f-time {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #b9bdbd;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        padding-top: 5px;
        margin-left: 41px;
        padding-bottom: 16px;
        position: relative;
      }
      .msg {
        margin-left: 41px;
        margin-top: 7px;
        background: #f4f8ff;
        border-radius: 4px;
        padding: 11px 16px;
        .msg-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #1e1f1f;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        .msg-all {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #b9bdbd;
          line-height: 17px;
          text-align: left;
          font-style: normal;
          margin-top: 8px;
        }
      }
      .f-time::after {
        content: ""; /* 伪元素的内容为空 */
        position: absolute; /* 使用绝对定位 */
        bottom: 0; /* 距离顶部一定距离 */
        left: 0; /* 距离左侧一定距离 */
        width: 100%; /* 横线的宽度 */
        height: 1px; /* 横线的高度 */
        background-color: rgba(0, 0, 0, 0.05); /* 横线的颜色 */
      }
    }
  }
  .hf {
    padding: 14px 16px 35px 16px;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    ::v-deep(.van-cell-group) {
      background: #f4f8ff;
      border-radius: 20px;
    }
    ::v-deep(.van-field__control::placeholder) {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #b9bdbd;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }
}
::v-deep(.van-action-sheet__content) {
  background: #ffffff;
}
::v-deep(.van-action-sheet__item:first-child) {
  color: red;
}
</style>
